<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户登录-蜗牛短视频分享平台</title>
    <link rel="stylesheet" th:href="@{/css/index.css}" />
    <link rel="stylesheet" th:href="@{/css/login.css}" />
    <script type="application/javascript" th:src="@{/js/jquery-3.5.1.js}"></script>
    <script>
        $(document).ready(function () {
            $("#log").click(function () {
                window.location.href="/toLogin"
            })
            var flag=false;
            $("#username").blur(function () {
                $.get('/user/exist',{'username':$("#username").val()},function (data) {
                    if (data==true){
                        $("#ErrorName").html("用户名已存在")
                        flag=false;
                    }else {
                        $("#ErrorName").html("")
                        flag=true
                    }
                })
            })
            $("#Myform").submit(function () {
                var name=$("#username").val()
                var password1=$("#password1").val()
                var password=$("#password").val()
                var email=$("#email").val()
                if (!flag){
                    $("#ErrorName").html("用户名已存在")
                    return false;
                }
                $("#ErrorName").html("")
                if (name.length==0){
                    $("#ErrorName").html("不能为空")
                    return false
                }
                if (name.length>8||name.length<3){
                    $("#ErrorName").html("必须为3-8个字符")
                    return false
                }
                $("#ErrorName").html("")
                if (password1.length==0){
                    $("#ErrorPassword1").html("不能为空")
                    return false
                }
                if (password1.length>12||password1.length<6){
                    $("#ErrorPassword1").html("必须为6-12个字符")
                    return false
                }
                $("#ErrorPassword1").html("")
                if (password.length==0){
                    $("#ErrorPassword").html("不能为空")
                    return false
                }
                if (password!=password1){
                    $("#ErrorPassword").html("密码不一致")
                    return false
                }
                $("#ErrorPassword").html("")
                if (email.length==0){
                    $("#ErrorEmail").html("不能为空")
                    return false
                }
                var myreg = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
                if(!myreg.test(email)){
                    $("#ErrorEmail").html("请输入正确邮箱地址");
                     return  false;
                }
                $("#ErrorEmail").html("")
            })
        })
    </script>
</head>
<body>
<div
        class="v3-app-layout layoutstatus-header--Normal layoutstatus-side--Hidden limitWidth">
    <div th:replace="header :: #header"></div>
    <div class="Dialog-container login-dialog-container"
         style="display: block;">
        <div class="Dialog__wrap">
            <div class="LoginDialog__container">
                <div class="LoginDialog__header">
                    <div class="title">注册</div>
                </div>
                <div id="BD_Login_Form" class="LoginDialog__content">
                    <div class="ssosdk-container sso-xigua code_login"
                         id="sso_container" data-pagetype="code_login">
                        <div class="page-main">
                            <div class="content-main content-main-modal">
                                <form id="Myform" class="form-main" method="post" action="/user/register">
                                    <div class="form-input ">
                                        <div class="input-container">
                                            <input required name="username" id="username" type="tel" class="form-input-main"
                                                   placeholder="请输入账号" autocomplete="on" value="">

                                        </div>
                                        <div th:text="${msg}" id="ErrorName" style="color: red"></div>
                                    </div>
                                    <div class="form-input form-input-last">
                                        <input id="password1" required name="password1" type="password" class="form-input-main"
                                               placeholder="请输入密码" autocomplete="off" value="">
                                    </div>
                                    <div  id="ErrorPassword1" style="color: red"></div>
                                    <div class="form-input form-input-last">
                                        <input id="password" required name="password" type="password" class="form-input-main"
                                               placeholder="请输入确认密码" autocomplete="off" value="">
                                    </div>
                                    <div  id="ErrorPassword" style="color: red"></div>
                                    <div class="form-input form-input-last">
                                        <input id="email" required name="email" type="text" class="form-input-main"
                                               placeholder="请输入邮箱" autocomplete="off" value="">
                                    </div>
                                    <div  id="ErrorEmail" style="color: red"></div>
                                    <div class="error-tips show-tips"></div>
                                    <button id="sso_submit" class="form-button btn-active"
                                            style="background-color: rgb(248, 89, 89); cursor: pointer;">注册</button>
                                    <button id="log" type="button" class="form-button btn-active"
                                            style="background-color: rgb(248, 89, 89); cursor: pointer;">登录</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>